<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
    <fieldset>
        <legend>新增一个人员</legend>
        <div class="form-group">
            <label>姓名：</label>
            <input type="text" v-model="newPerson.name"/>
        </div>
        <div class="form-group">
            <label>年龄：</label>
            <input type="text" v-model="newPerson.age"/>
        </div>
        <div class="form-group">
            <label>性别:</label>
            <select v-model="newPerson.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="createPerson">增加</button>
        </div>
    </fieldset>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="person in people">
               <td>{{ person.name }}</td>
               <td>{{ person.age }}</td>
               <td>{{ person.sex }}</td>
               <td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>
            </tr>
        </tbody>
    </table>
</div>

</body>
<script src="../js/vue.1.0.24.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data:{
        newPerson: {
            name: '',
            age: 0,
            sex: '男'
        },
        people: [{
            name: 'Jack',
            age: 30,
            sex: 'Male'
        }, {
            name: 'Bill',
            age: 26,
            sex: 'Male'
        }, {
            name: 'Tracy',
            age: 22,
            sex: 'Female'
        }, {
            name: 'Chris',
            age: 36,
            sex: 'Male'
        }]
    },
    methods:{
        createPerson:function () {
            this.people.push(this.newPerson);
            this.newPerson = {name:'',age:0,sex:'男'} //添加完重置
        },
        deletePerson:function (index) {
            this.people.splice(index,1);
        }
    }
});
</script>
</html>